<template>
  <div class="container">
    <div>
      <div class="header">
        <h2>欢迎回来!</h2>
      </div>
      <div class="background-image">
        <ul class="list">
          <li v-for="(row, index) in data" :key="index" class="row">
            <span v-for="(item, itemIndex) in row" :key="itemIndex" class="item">{{ item }}</span>
          </li>
        </ul>
      </div>
    </div>

    <div class="activity-page">
      <div class="my-activities">
        <h2>我的活动</h2>
        <div class="activity-item" v-for="activity in myActivities" :key="activity.id">
          <div class="activity-content" @click="goToActivity(activity.skip)">
            <div class="activity-title">{{ activity.title }}</div>
            <div class="activity-description">{{ activity.description }}</div>
          </div>
          <div class="progress-circle" :class="{ 'play-button': activity.isVideo }">
            <!-- 显示进度或播放按钮 -->
            <span v-if="!activity.isVideo && activity.progress !== null"
              >{{ activity.progress }}%</span
            >
            <i v-else class="van-icon van-icon-play"></i>
          </div>
        </div>
        <div :style="{ position: 'relative', top: '3vw', left: '70%' }" @click="goToActivitylist">
          <icon-more size="16" /> 查看更多
        </div>
      </div>

      <div class="todays-activities">
        <h2>今天的活动</h2>
        <div
          class="today-activity"
          v-for="activity in todaysActivities"
          :key="activity.id"
          @click="goToNull"
        >
          <img :src="activity.image" alt="" class="activity-image" />
          <div class="activity-details">
            <div class="activity-name">{{ activity.name }}</div>
            <div class="activity-duration">{{ activity.duration }}</div>
            <div class="activity-calories">{{ activity.calories }}</div>
          </div>
        </div>
      </div>
      <div :style="{ position: 'relative', top: '-11vw', left: '70%' }" @click="goTomotionlist">
        <icon-more size="16" /> 查看更多
      </div>
      <KotoTabbar></KotoTabbar>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import activityImage from '@/assets/fbfb169d3cd59862deebd6b0c1ac6c2.png'
const router = useRouter()

const data = [
  ['瘦肚子', '瘦腿', '马甲线', '减脂'],
  ['拉伸', '体态', '增肌', '瘦腰'],
]

// 我的活动数据
const myActivities = ref([
  {
    id: 1,
    title: '瑜伽初学者',
    description: '这里是课目的详细介绍，超出...',
    skip: '/activity',
    progress: 46,
    isVideo: false,
  },
  {
    id: 2,
    title: '基本的瑜伽姿势',
    description: '基本的瑜伽背后的哲学知识很...',
    skip: '/yogaposes',
    progress: null,
    isVideo: true,
  },
])

// 今天的活动数据
const todaysActivities = ref([
  {
    id: 1,
    name: '活动练习一',
    image: activityImage,
    duration: '5mins',
    calories: '51kcal',
  },
  {
    id: 2,
    name: '活动练习二',
    image: activityImage,
    duration: '15mins',
    calories: '100kcal',
  },
])

//跳转
const goToActivity = (Skip) => {
  router.push(Skip)
}
const goToActivitylist = () => {
  router.push('/activitylist')
}
const goTomotionlist = () => {
  router.push('/motionlist')
}
const goToNull = () => {
  router.push('/null')
}
</script>

<style lang="scss">
.container {
  position: relative;
  height: 100vh;
  display: flex;
  flex-direction: column;
  width: 100vw;
  overflow-x: hidden; /* 禁止水平滚动条 */
}

.header {
  z-index: 1;
  position: relative;
  padding: 20px;
  color: white;
  text-align: center;
  border-top-left-radius: 20px;
  background-color: rgba(0, 0, 0, 0.5);

  h2 {
    font-size: 8vw;
    color: rgb(235, 235, 245);
    position: absolute;
    left: 10vw;
    font-family: 'Arial', sans-serif;
    font-weight: bold;
  }
}

.background-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 60%;
  background-image: url('../views/LoginRegister/imgs/海边.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
  border-top-left-radius: 20px;

  .list {
    position: absolute;
    bottom: 22vw;
    right: 48vw;
    width: 93%;
    max-width: 100%;
    transform: translate(50%, 50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .row {
      display: flex;
      justify-content: space-between;
      width: 100%;
      margin-bottom: 0;
      background-color: rgba(235, 225, 205, 0.1);

      .item {
        flex: 1;
        text-align: center;
        line-height: 20vw;
        font-size: 4vw;
        color: rgb(235, 235, 245);
        font-family: 'Arial', sans-serif;
        border-right: 1px solid rgb(155, 155, 155);
        border-bottom: 1px solid rgb(155, 155, 155);
        width: 20vw;
        box-sizing: border-box;
        height: 20vw;
      }

      .item:last-child {
        border-right: none;
      }

      &.row:last-child .item {
        border-bottom: none;
      }
    }
  }
}

.activity-page {
  font-family: 'Arial', sans-serif;
  line-height: 1.6;
  color: #333;
  background-color: #f8f9fa;
  padding: 2rem;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  margin-top: 95vw;

  .my-activities,
  .todays-activities {
    margin-bottom: 3rem;

    h2 {
      font-size: 1.8rem;
      margin-bottom: 1rem;
      color: #2c3e50;
      border-bottom: 2px solid #e74c3c;
      padding-bottom: 0.5rem;
    }
  }

  .activity-item {
    display: flex;
    align-items: center;
    padding: 1rem;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease-in-out;

    &:hover {
      transform: translateY(-5px);
    }

    .activity-content {
      flex-grow: 1;
      margin-right: 1rem;

      .activity-title {
        font-size: 1.2rem;
        font-weight: bold;
        color: #34495e;
      }

      .activity-description {
        font-size: 0.9rem;
        color: #7f8c8d;
      }
    }

    .progress-circle {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      font-size: 1.2rem;
      font-weight: bold;
      color: white;
      background-color: #3498db;
      transition: background-color 0.3s ease-in-out;

      &.play-button {
        background-color: #a064ff;

        &:hover {
          background-color: #8e44ad;
        }
      }
    }
  }

  .today-activity {
    display: flex;
    align-items: center;
    padding: 1rem;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-bottom: 1rem;
    transition: transform 0.3s ease-in-out;

    &:hover {
      transform: translateY(-5px);
    }

    .activity-image {
      width: 100px;
      height: 80px;
      object-fit: cover;
      border-radius: 5px;
      margin-right: 1rem;
      transition: transform 0.3s ease-in-out;

      &:hover {
        transform: scale(1.1);
      }
    }

    .activity-details {
      flex-grow: 1;

      .activity-name {
        font-size: 1.2rem;
        font-weight: bold;
        color: #34495e;
      }

      .activity-duration,
      .activity-calories {
        font-size: 0.9rem;
        color: #7f8c8d;
        margin-top: 0.5rem;
      }
    }
  }
}

.van-tabbar {
  margin-top: auto;
  background-color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
}
</style>
<style scoped lang="css"></style>
